<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!--全局操作-->
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd()" v-if="hasPerm('admin:system:menu:add')">新建</a-button>
      </div>
      <!--数据表格-->
      <a-table
        :key="ellipsis"
        :rowKey=" (record => record.id)"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        @change="tableChange"
        :defaultExpandAllRows="false"
      >
        <!--字段扩展显示customRender-->
        <template v-slot:icon="icon">
          <a-icon v-if="icon" :type="icon"/>
        </template>
        <!--行操作-->
        <template v-slot:action="text, record">
          <span>
            <a href="javascript:" @click="handleAdd(record)" v-if="hasPerm('admin:system:menu:add')">子菜单</a>
            <a-divider type="vertical"/>
            <a href="javascript:" @click="handleEdit(record)" v-if="hasPerm('admin:system:menu:edit')">编辑</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确定删除吗？" @confirm="handleDelete(record)" v-if="hasPerm('admin:system:menu:delete')">
              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
              <a href="javascript:">删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
      <!--自定义组件-->
      <save ref="save" @refresh="refresh"></save>
    </a-card>
  </page-header-wrapper>
</template>
<script>
  import curdMixins from '@/utils/mixins/curdMixins'
  import { getList, deleteByIds } from '@/api/system/menu'
  import save from './save'
  export default {
    mixins: [curdMixins],
    components: {
      save
    },
    data () {
      this.columns = [
        {
          title: '菜单名称',
          dataIndex: 'title'
        },
        {
          title: '路由地址',
          dataIndex: 'path',
          customRender: (value, record) => {
            return {
              children: record.redirect ? `${value}[redirect:${record.redirect}]` : value,
              attrs: {}
            }
          }
        },
        {
          title: '图标',
          dataIndex: 'icon',
          scopedSlots: { customRender: 'icon' }
        },
        {
          title: '组件',
          dataIndex: 'name'
        },
        {
          title: '优先级',
          dataIndex: 'priority'
        },
        {
          title: '类型',
          dataIndex: 'type'
        },
        {
          title: '隐藏子菜单',
          dataIndex: 'hideChildren',
          customRender: (value) => {
            return {
              children: value === 0 ? '隐藏' : '',
              attrs: {}
            }
          }
        },
        {
          title: '权限码',
          dataIndex: 'code'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
      return {
        ellipsis: false
      }
    },
    methods: {
      list (param) {
        return getList(param)
      },
      queryBack () {
        // 通过改变key 实现 defaultExpandAllRows 生效
        this.ellipsis = true
        // this.$refs['.ant-table-row-expand-icon ant-table-row-collapsed'].click()
      },
      delete (record) {
        return deleteByIds({ ids: [record.id] })
      }
    }
  }
</script>
<style scoped>
</style>
